<template>
	<div>
	<!-- 商品列表 -->
	{{ query_info.query_category }}
	<el-row>
	  <el-col :span="4" v-for="item in goodlist" :key="item.id">
	    <el-card class="el-card-class">
	      <img :src="baseUrl + item.img" class="image">
	      <div style="padding: 14px;">
	        <span>{{item.name}}</span>
	        <div class="bottom clearfix">
	          <el-button type="text" class="button" @click="getDetail(item.id)">查看</el-button>
	        </div>
	      </div>
	    </el-card>
	  </el-col>
	</el-row>
	
	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query_info.page"
	 :page-sizes="[1, 2, 5, 10]" :page-size="query_info.page_size" layout="total, sizes, prev, pager, next, jumper"
	 :total="list_count">
	</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				query_info: {
					"token": window.sessionStorage.getItem("token"),
					"page": 1,
					"page_size": 10,
					"query_category": this.$route.query.category,
				},
				goodlist: [],
				list_count: 0,
				baseUrl: "http://127.0.0.1:8000/",
				goodId: -1,
			}
		},
		watch: {
			'$route': 'getquery',
		},
		created() {
			this.getgoodlist();
		},
		methods: {
			getquery() {
				this.query_info.query_category = this.$route.query.category;
				this.getgoodlist();
			},
			async getgoodlist() {
				const {
					data: res
				} = await this.$http.get('goodapi/operation/list/', {
					params: this.query_info
				});
				// console.log(res);
				this.goodlist = res.results;
				this.list_count = res.count;
			},
			handleSizeChange(newPageSize) {
				this.query_info.page_size = newPageSize;
				this.getgoodlist();
			},
			handleCurrentChange(current_page) {
				this.query_info.page = current_page;
				this.getgoodlist();
			},
			getDetail(id) {
				// console.log(id);
				this.$router.push({
					path: "/buyer/detail",
					query: {
						"good_id": id,
					}
				});
			}
		}
	}
</script>

<style>
	  .bottom {
	    margin-top: 13px;
	    line-height: 12px;
	  }
	
	  .button {
	    padding: 0;
	    float: right;
	  }
	
	  .image {
	    width: 100%;
	    display: block;
	  }
	
	  .clearfix:before,
	  .clearfix:after {
	      display: table;
	      content: "";
	  }
	  
	  .clearfix:after {
	      clear: both
	  }
	  .el-card-class {
		  margin: 0.9375rem;
		  height: 220px;
		  width: 180px;
	  }
</style>
